<template>
  <div class="advance-wrapper">
    <div class="selector">
      <el-select placeholder="查询内容" size="mini" v-model="search.content" @change="contentChange">
        <el-option v-for="item in contents" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select placeholder="请选择关系" size="mini" v-model="search.relate" :disabled="search.content === 'rq'">
        <el-option v-for="item in relates" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>
    <template>
      <el-input placeholder="请输入查询内容" size="mini" v-model="search.keyword" type="search"
      ></el-input>
      <van-field name="datetimePicker" label="日期" :value="rq" placeholder="点击选择时间"
                 @click="showPicker = true" @focus="noBomBox"
      />
      <van-calendar v-model="showPicker" :min-date="minDate" type="range" allow-same-day @confirm="dateConfirm"/>
    </template>

    <el-button type="text" size="mini" @click="addCondition">添加</el-button>
    <el-button type="text" size="mini" @click="resetCondition">重置</el-button>
    <el-divider>搜索条件</el-divider>
    <div class="query-conditions" v-if="queryConditions.length">
      <div class="query-condition" v-for="(item, index) in queryConditions" :key="index">
        <span>{{ getLabelByKey(contents, item.content) }} {{ getLabelByKey(relates, item.relate) }} {{
            item.keyword
          }}</span>
        <div class="handler">
          <i class="el-icon-delete" @click="removeOne(index)"></i>
        </div>
      </div>
    </div>
    <el-button type="primary" size="mini" @click="queryZd">查账单</el-button>
    <el-button type="primary" size="mini" @click="queryMx">查明细</el-button>
    <el-button type="primary" size="mini" @click="queryOrderZd">查订单账单</el-button>
    <el-button type="primary" size="mini" @click="queryOrderMx">查订单明细</el-button>
    <el-tabs v-model="tabActive">
      <el-tab-pane label="账单" name="zd">
        <van-loading v-if="zdLoading"></van-loading>
        <div class="empty-slot" v-if="!zdTableData.length">什么都没找到</div>
        <zd-table :tableData="zdTableData" v-if="zdTableData.length" :conditions="getTargetConditions()" type="zd"></zd-table>
      </el-tab-pane>
      <el-tab-pane label="明细" name="mx">
        <van-loading v-if="mxLoading"></van-loading>
        <div class="empty-slot" v-if="!mxTableData.length">什么都没找到</div>
        <mx-table :table-data="mxTableData" v-if="mxTableData.length" :conditions="getTargetConditions()" type="mx"></mx-table>
      </el-tab-pane>
      <el-tab-pane label="订单账单" name="orderZd">
        <van-loading v-if="orderZdLoading"></van-loading>
        <div class="empty-slot" v-if="!orderZdTableData.length">什么都没找到</div>
        <zd-table :table-data="orderZdTableData" v-if="orderZdTableData.length" :conditions="getTargetConditions()"  type="order"></zd-table>
      </el-tab-pane>
      <el-tab-pane label="订单明细" name="orderMx">
        <van-loading v-if="orderMxLoading"></van-loading>
        <div class="empty-slot" v-if="!orderMxTableData.length">什么都没找到</div>
        <mx-table :table-data="orderMxTableData" v-if="orderMxTableData.length" :conditions="getTargetConditions()"  type="orderMx"></mx-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import ZdTable from '@/views/advance/components/zdTable.vue'
import { advanceQueryMx, advanceQueryOrderMx, advanceQueryOrderZd, advanceQueryZd } from '@/api/goods'
import MxTable from '@/views/advance/components/mxTable.vue'

export default {
  name: 'index',
  components: { MxTable, ZdTable },
  data() {
    return {
      tabActive: 'zd',
      contents: [
        {
          label: '客户名称',
          value: 'khname'
        },
        {
          label: '客户编号',
          value: 'khbh'
        },
        {
          label: '商品名称',
          value: 'spname'
        },
        {
          label: '商品编号',
          value: 'spbh'
        },
        {
          label: '单号',
          value: 'dh'
        },
        {
          label: '司机',
          value: 'carman'
        }
      ],
      relates: [
        {
          label: '包含',
          value: 'like'
        },
        {
          label: '等于',
          value: 'equal'
        },
        {
          label: '大于',
          value: 'gt'
        },
        {
          label: '小于',
          value: 'lt'
        },
        {
          label: '大于等于',
          value: 'ge'
        },
        {
          label: '小于等于',
          value: 'le'
        }
      ],
      search: {
        content: '',
        keyword: '',
        relate: ''
      },
      rq: '',
      showPicker: false,
      minDate: dayjs().subtract(1, 'year').toDate(),
      date: [],
      queryConditions: [],

      // 账单表格
      zdTableData: [],
      // 明细表格
      mxTableData: [],
      // 订单账单表格
      orderZdTableData: [],
      // 订单明细表格
      orderMxTableData: [],
      zdLoading: false,
      mxLoading: false,
      orderZdLoading: false,
      orderMxLoading: false
    }
  },
  methods: {
    getLabelByKey(options, key) {
      return options.find(item => item.value === key)?.label
    },
    addCondition() {
      if (!this.search.content) {
        this.$message.warning('请选择查询内容')
        return
      }

      if (!this.search.relate) {
        this.$message.warning('请选择关系')
        return
      }

      if (!this.search.keyword) {
        this.$message.warning('请输入查询内容')
        return
      }

      this.queryConditions.push({
        content: this.search.content,
        relate: this.search.relate,
        keyword: this.search.keyword
      })

      // 清空搜索条件
      this.search.content = ''
      this.search.relate = ''
      this.search.keyword = ''
    },
    resetCondition() {
      this.queryConditions = []
      // 重置当前搜索条件
      this.search.content = ''
      this.search.relate = ''
      this.search.keyword = ''
    },
    removeOne(index) {
      this.queryConditions.splice(index, 1)
    },
    contentChange(value) {
      this.search.relate = ''
      this.search.keyword = ''
      if (value === 'rq') {
        this.search.relate = 'like'
      }
    },
    noBomBox(Event) {
      document.activeElement.blur()
    },
    dateConfirm(date) {
      this.date = date
      this.rq = dayjs(date[0]).startOf('day').format('YYYY-MM-DD') + '至' + dayjs(date[1]).endOf('day').format('YYYY-MM-DD')
      this.showPicker = false
    },
    getTargetConditions() {
      const queryConditions = [...this.queryConditions, {
        keyword: dayjs(this.date[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss'),
        relate: 'ge',
        content: 'rq'
      }, {
        keyword: dayjs(this.date[1]).endOf('day').format('YYYY-MM-DD HH:mm:ss'),
        relate: 'le',
        content: 'rq'
      }]
      return queryConditions
    },
    // 查询账单
    queryZd() {
      if (this.queryConditions.length === 0) {
        this.$message.warning('请添加查询条件')
        return
      }
      if (this.date.length === 0) {
        this.$message.warning('请选择日期')
        return
      }
      if (this.queryConditions.find(v => v.content === 'spname' || v.content === 'spbh')) {
        this.$message.warning('含有商品名称的查询条件不支持查询订单，请移步明细查询')
        return
      }
      this.tabActive = 'zd'
      const queryConditions = this.getTargetConditions()
      this.zdLoading = true
      this.$buryingPoint('高级查询-查询账单', {
        queryConditions
      })
      advanceQueryZd(queryConditions).then(res => {
        this.zdTableData = res.data || []
      }).finally(() => {
        this.zdLoading = false
      })
    },
    // 查询明细
    queryMx() {
      if (this.queryConditions.length === 0) {
        this.$message.warning('请添加查询条件')
        return
      }
      if (this.date.length === 0) {
        this.$message.warning('请选择日期')
        return
      }
      this.tabActive = 'mx'
      const queryConditions = this.getTargetConditions()
      this.mxLoading = true

      this.$buryingPoint('高级查询-查询明细', {
        queryConditions
      })
      advanceQueryMx(queryConditions).then(res => {
        this.mxTableData = res.data || []
      }).finally(() => {
        this.mxLoading = false
      })
    },
    // 查询订单账单
    queryOrderZd() {
      if (this.queryConditions.length === 0) {
        this.$message.warning('请添加查询条件')
        return
      }
      if (this.date.length === 0) {
        this.$message.warning('请选择日期')
        return
      }
      if (this.queryConditions.find(v => v.content === 'spname' || v.content === 'spbh')) {
        this.$message.warning('含有商品的查询条件不支持查询订单，请移步明细查询')
        return
      }
      this.tabActive = 'orderZd'
      const queryConditions = this.getTargetConditions()
      this.$buryingPoint('高级查询-查询订单账单', {
        queryConditions
      })
      this.zdLoading = true
      advanceQueryOrderZd(queryConditions, true).then(res => {
        this.orderZdTableData = res.data || []
      }).finally(() => {
        this.zdLoading = false
      })
    },
    // 查询订单明细
    queryOrderMx() {
      if (this.queryConditions.length === 0) {
        this.$message.warning('请添加查询条件')
        return
      }
      if (this.date.length === 0) {
        this.$message.warning('请选择日期')
        return
      }
      this.tabActive = 'orderMx'
      const queryConditions = this.getTargetConditions()
      this.$buryingPoint('高级查询-查询订单明细', {
        queryConditions
      })
      this.orderMxLoading = true
      advanceQueryOrderMx(queryConditions, false).then(res => {
        this.orderMxTableData = res.data || []
      }).finally(() => {
        this.orderMxLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.advance-wrapper {
  max-width: 800px;
  padding: 5px 8px;

  .selector {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;

    .el-select {
      width: calc(50% - 5px);
    }
  }

  .empty-slot {
    font-size: 0.8rem;
    color: #999999;
    text-align: center;
  }

  .query-conditions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    border: 1px solid #ebeef5;
    padding: 10px 5px;
    border-radius: 4px;
    font-size: 0.8rem;

    .query-condition {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .handler {
        color: #ff1000;
      }
    }
  }
}
</style>
